<template>
  <div>
    <el-button type="warning" @click="add">添加</el-button>
    <el-button type="danger">批量删除</el-button>
    <!-- 弹出框 -->
    <add-user :usercase="usercase" ref="child" @getuserList="getuserList" @gettotal="gettotal" :paswrd="paswrd"></add-user>
    <!-- 表格 -->
    <user-form
      :userlist="userlist"
      @getuserList="getuserList"
      :pages="pages"
      :userlength="userlength"
      @edituser="edituser"
    ></user-form>
  </div>
</template>

<script>
import addUser from "./components/adduser.vue";
import userForm from "./components/userform.vue";
export default {
  props: {},
  data() {
    return {
      usercase: {
        // 弹出框状态
        flag: false,
      },
      pages: {
        // 分页数据
        page: 1,
        size: 3,
      },
      userlist: [], //列表数据
      userlength: 0,
      paswrd:''
    };
  },
  computed: {},
  created() {
    this.getuserList(); // 分页数据
    this.gettotal(); // 总数
  },
  mounted() {},
  watch: {},
  methods: {
    getuserList() {
      // 获取管理员数据(分页)
      this.$api.getuserlist(this.pages).then((res) => {
        this.userlist = res.data.list;
      });
    },
    gettotal() {
      // 获取管理员数据(总数)
      this.$api.getusercount(this.pages).then((res) => {
        this.userlength = res.data.list[0].total;
      });
    },
    add() {
      // 弹出框状态

      this.usercase.flag = true;
    },
    edituser(val) {
      // 修改
      this.paswrd = val.password
      delete (val.id)
      delete (val.rolename)
      delete (val.randstr)
      val.password = ''
      this.$refs.child.form = val;
      console.log(this.$refs.child.form);
      this.usercase.flag = true;
    },
  },
  components: { addUser, userForm },
};
</script>

<style scoped lang="scss">
</style>
